<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>




<div id="app">

    <heima43 :students="lessons" :man="val"></heima43>

</div>



<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //局部组件,需要声明注册到某个vue实例中才可以使用
    let heima43 = {
        template:
            `<div>
                    <ul>
                        <li v-for="(student,index) in students" :key="index">
                            {{student.id}}-{{student.name}}
                        </li>
                    </ul>
                    <div v-if="man">
                        他是个男人
                    </div>
                    <div v-else>他不是个男人</div>
             </div>`,
        data(){
            return{
                tem:"18"
            }
        },
        props:{
            students:{
                type:Array,
                default:[]
            },
            man:{
                type:Boolean,
                default:false
            }
        }
    };


    var vm = new Vue({
        el:"#app",
        components:{
            heima43
        },
        data:{
            lessons:[
                {id:1, name: 'java'},
                {id:2, name: 'php'},
                {id:3, name: 'ios'},
            ],
            val:true
        }
    })
</script>


</body>
</html>